<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<style>
	.white{
		background-color: white;
	}
	.black{
		background-color: gray;
	}
</style>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/my.js">
	
</script>
<script type="text/javascript">
	window.onload=function(){
		var three = document.getElementById("three");
		var four = document.getElementById("four");
		three.onkeyup=function(){
			if(this.value.length>0 && this.value.charCodeAt(0)!=32){
				var tipname = this.value;
				var xmlHttpReq = new XMLHttpRequest();
				xmlHttpReq.onreadystatechange=function(){
				if(xmlHttpReq.readyState==4 && xmlHttpReq.status==200){
					var arr = eval("("+xmlHttpReq.responseText+")");
					four.innerHTML = "";
					for(var i = 0;i<arr.length;i++){
						var json = arr[i];
						four.innerHTML +="<div class='white' onmouseover='changeBlack(this);' onmouseon='changeWhite(this);' onclick='setValue(this);'>"+json["name"]+"</div>";
					}
				}
			}
		        xmlHttpReq.open("POST", "${pageContext.request.contextPath}/TipNameServlet?abc="+new Date().getTime(),true);
		        xmlHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		        xmlHttpReq.send("tipname="+tipname);
		        
		        
		        
			}
			
		};
	};
	function changeBlack(obj){
	
		obj.className = "black";
	
	}
	function changeWhite(obj){
	
		obj.className = "white";
	
	}
	function setValue(obj){
		var content = obj.innerHTML;
		var three = document.getElementById("three");
		three.value = content;
		var four = document.getElementById("four");
		four.innerHTML = "";
	}
</script>

<div id="divmenu">
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=文学">文学</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=生活">生活</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=计算机">计算机</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=外语">外语</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=经营">经管</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=励志">励志</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=社科">社科</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=学术">学术</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=少儿">少儿</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=艺术">艺术</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=原版">原版</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=科技">科技</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=考试">考试</a>
	<a
		href="${pageContext.request.contextPath}/ProductListPageServlet?category=生活百科">生活百科</a>
	<a href="${pageContext.request.contextPath}/ProductListPageServlet"
		style="color:#FFFF00">全部商品目录</a>
</div>
<div id="divsearch">
	<form action="${pageContext.request.contextPath}/ProductListPageServlet" method="post" name="form1">
		<table width="100%" border="0" cellspacing="0">
			<input type="hidden" name="category" value="${category }">
			<input type="hidden" name="currentPage" value="${pageBean.currentPage }">
			<tr>
				<td style="text-align:right; padding-right:220px">
				Search <input type="text" name="key" class="inputtable" id="three" id="name" /> 
					<input type="image" src="images/serchbutton.gif" border="0" style="margin-bottom:-4px">
				</td>
			</tr>
			<tr>
				<td style="text-align:left; padding-right:220px;">
				<div id="four" style="width:125px;margin-left: 947px;"  >
				</div>
				</td>
			</tr>
		</table>

	</form>
</div>
<div id="content"
	style="background-color:white;width:128px; text-align:left;margin-left:945px;color:black;float:left;margin-top: -20px;display: none">
	<div onclick='fillNameValue(this)' onmouseover='changeBackground_over(this)' onmouseout='changeBackground_out(this)'>haha</div>
</div>